<template>
  <div
    class="play-content infinite-list"
  >
   <!-- v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="50" -->
    <play-list
      style="minheight: 500px"
      class="playmain"
      :playList="list"
    ></play-list>
    <template v-if="isLoading">
      <loading></loading>
    </template>
  </div>
</template>
<script>
import PlayList from "./Play-list.vue";
import loading from "./Loading.vue";
export default {
  components: {
    PlayList,
    loading,
  },
  props: {
    params: {
      type: Object,
      default: () => {},
    },
    isScroll: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      //    playList_params: { limit: 50, offset: 0, cat: "", order: "hot" },
      list: [],
      isLoading: true,
      busy: true,
    };
  },
  created() {
    this.getPlaylist(this.params);
  },
  computed: {},
  methods: {
    async getPlaylist(params) {
      this.busy = true;
      const res = await this.$api.getPlayList(params);
      this.list =
        this.params.offset !== 0
          ? [...this.list, ...res.playlists]
          : res.playlists;
      this.busy = this.list.length >= res.total;
      this.isLoading = !this.busy;
    },
    loadMore() {
      this.busy = true;
      console.log("loadMore");
      this.busy = true;
      this.params.offset = this.list.length;
    },
  },
  watch: {
    params: {
      handler(newVal) {
        // if (this.list.length > 50) {
        //   return;
        // }
        this.getPlaylist(newVal);
      },
      deep: true, // 深度监听
    },
  },
};
</script>
<style lang="less" scoped>
.play-content {
  width: 1200px;
  padding-top: 40px;
  padding-bottom: 20px;
  min-height: 500px;
  // border: 1px solid #ccc;
  margin: 0 auto;
  .playmain {
    /deep/.playlist-cat {
      flex-wrap: wrap;
      li {
        width: 210px;
        list-style: none;
        padding-bottom: 20px;
      }
    }
  }
}
</style>
